<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />

	</head>
	<style>
		#tools {
			display: flex;
		}

		#search {
			width: 600px;
			display: flex;
			/* 				justify-content: space-between; */
		}

		body {
			min-width: 1200px;
		}
	</style>
	<body>
		<div>
			<h1>区域管理
		<a href="tubiao.html"><i class="fa fa-bar-chart" aria-hidden="true"></i></a>
		</h1>
		</div>
		<div id="tools">


			<div id="search">
				<input type="text" id="build" placeholder="请输入楼栋" />
				<input type="text" id="floor" placeholder="请输入楼层" />
				<button class="layui-btn" onclick="searchUser()"><i class="fa fa-search"></i>查询</button>
			</div>
			
			<div>
				<button class="layui-btn" onclick="showAddUserModel()"><i class="fa fa-plus"></i> 新增区域</button>
				<button class="layui-btn layui-btn-normal" onclick="showEditUserModel()"><i class="fa fa-edit"></i>
					修改区域</button>
				<button class="layui-btn layui-btn-danger" onclick="deleteUser()"><i class="fa fa-trash"></i>
					删除区域</button>
				
			</div>
			<div id="refresh">
				<button onclick="window.location.reload()" class="layui-btn layui-btn-primary layui-btn-sm"><i
						class="fa fa-undo"></i>
				</button>
				<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-link"></i>
				</button>
			</div>
		</div>
		<table id="userInfoTable" lay-even class="layui-table" lay-filter="test">

		</table>
		<div id="addUserModel" style="display: none;" align="center">
			<form class="layui-form layui-form-pane" style="margin: 0px 20px;">
				<input type="hidden" name="areaId" id="areaId" />
				<div class="layui-form-item">
					<label class="layui-form-label">楼栋</label>
					<div class="layui-input-block">
						<input type="text" id="build" name="build" required lay-verify="checkUserName"
							placeholder="请输入楼栋" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">楼层</label>
					<div class="layui-input-block">
						<input type="text" id="floor" name="floor" required lay-verify="checkUserPwd"
							placeholder="请输入楼层" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 0px;">
						<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>

		<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function searchUser() {
				layui.table.reload("userInfoTable", {
					where: {
						build: layui.$("#build").val(),
						floor: layui.$("#floor").val()
					}
				})
			}
			var options = {
				elem: '#userInfoTable',
				height: 312,
				url: 'http://127.0.0.1:8080/repair/regional/selectByPage' //数据接口
					,
				page: true //开启分页
					,
				response: {
					statusCode: 200 //规定成功的状态码，默认：0
				},
				parseData: function(res) { //res 即为原始返回的数据
					console.log(res);
					return {
						"code": res.code, //解析接口状态
						"msg": res.msg, //解析提示文本
						"count": res.data.total, //解析数据长度
						"data": res.data.list //解析数据列表
					};
				},
				cols: [
					[ //表头
						{
							type: 'checkbox'
						}, {
							field: 'areaId',
							title: 'ID',
							width: 80,
							sort: true
						}, {
							field: 'build',
							title: '楼栋',
							width: 200
						}, {
							field: 'floor',
							title: '楼层',
							width: 200
						}
					]
				]
			};
			layui.use('form', function() {
				var form = layui.form;

				//自定义验证规则
				form.verify({
					checkUserName: function(value) {
						if (value.length < 1) {
							return '用户名长度不能小于5';
						}
					},
					checkUserPwd: function(value) {
						if (value.length < 1) {
							return '密码长度不能小于5';
						}
					}


				});

				//监听提交
				form.on('submit(formDemo)', function(data) {
					//关闭模态框
					layui.use('layer', function() {

						//通过ajax提交
						console.log(data.field.build);
						console.log(data.field.floor);
						console.log(data);

						var userData;
						var url;
						if (data.field.areaId == "") {
							url = "http://127.0.0.1:8080/repair/regional/addRegional";
							userData = {
								build: data.field.build,
								floor: data.field.floor

							};
						} else {
							url = "http://127.0.0.1:8080/repair/regional/updateRegional";
							userData = {
								areaId: data.field.areaId,
								build: data.field.build,
								floor: data.field.floor

							};
						}


						layui.$.ajax({
							url: url,
							method: "post",
							data: userData,
							dataType: "json",
							success: function(data) {
								if (data.code == 200) {
									//表示添加成功
									//关闭模态框
									layui.layer.close(userMode);
									//刷新页面
									userTab.reload(options);
									//弹出添加成功的提示
									layui.layer.msg(data.msg);

								}
								if (data.code == 500) {
									//表示添加失败
									layui.layer.msg(data.msg);
								}
							}
						});

					});





					return false;
				});
			});

			layui.use('table', function() {
				var table = layui.table;

				//第一个实例
				userTab = table.render(options);

			});

			function showAddUserModel() {
				clearModel();
				layui.use('layer', function() {
					var layer = layui.layer;
					var $ = layui.$;

					userMode = layer.open({
						title: '添加用户',
						type: 1,
						content: $('#addUserModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
				});

			}

			function showEditUserModel() {
				clearModel();
				layui.use(['table', 'layer'], function() {
					var table = layui.table;

					var checkStatus = table.checkStatus('userInfoTable'); //userInfoTable 即为基础参数 id 对应的值
					console.log(checkStatus.data); //获取选中行的数据
					console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
					console.log(checkStatus.isAll); //表格是否全选
					if (checkStatus.data.length == 0) {
						layui.layer.msg('请选择数据');
						return;
					}

					if (checkStatus.data.length > 1) {
						layui.layer.msg('请选择一条数据');
						return;
					}

					//向模态框赋值
					layui.$("#areaId").val(checkStatus.data[0].areaId);
					layui.$("#build").val(checkStatus.data[0].build);
					layui.$('#floor').val(checkStatus.data[0].floor);

					// layui.$('#userPwd').val(checkStatus.data[0].userPwd);
					if (checkStatus.data[0].userSex == '男') {
						layui.$("input[value='男']").attr("checked", "checked");;
					}

					if (checkStatus.data[0].userSex == '女') {
						layui.$("input[value='女']").attr("checked", "checked");;
					}

					//展示模态框
					userMode = layui.layer.open({
						title: '编辑用户',
						type: 1,
						content: layui.$('#addUserModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});



				})

			}

			function clearModel() {
				layui.$('#userName').val('');
				layui.$('#userPwd').val('');
			}

			function deleteUser() {
				layui.use(['table', 'layer'], function() {
					var table = layui.table;

					var checkStatus = table.checkStatus('userInfoTable'); //userInfoTable 即为基础参数 id 对应的值
					console.log(checkStatus.data); //获取选中行的数据
					console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
					console.log(checkStatus.isAll); //表格是否全选
					if (checkStatus.data.length == 0) {
						layui.layer.msg('请选择数据');
						return;
					}

					var allUserId = [];
					for (var i = 0; i < checkStatus.data.length; i++) {
						allUserId.push(checkStatus.data[i].areaId);
						console.log("55555555555555");
						console.log(checkStatus.data[i].areaId);
						console.log(allUserId);
					}
					//向后台提交

					layui.$.ajax({
						url: "http://127.0.0.1:8080/repair/regional/deleteRegional",
						method: "post",
						data: {
							"allUserId": allUserId
						},
						dataType: "json",
						success: function(data) {
							if (data.code == 200) {
								//表示添加成功
								//关闭模态框
								//刷新页面
								userTab.reload(options);
								//弹出添加成功的提示
								layui.layer.msg(data.msg);

							}
							if (data.code == 500) {
								//表示添加失败
								layui.layer.msg(data.msg);
							}
						}
					});
					//提交成功后,刷新界面

				});
			}
		</script>
	</body>
</html>
